<template>
  <div>
    <ul class="el-upload-list el-upload-list--text" v-if="editable">
      <li class="el-upload-list__item is-success" v-for="(file, index) in fileList" :key="index" @click="downloadFile(file.fileId)">
        <a class="el-upload-list__item-name" :title="file[nameKey]">
          <i class="el-icon-document"></i>
          {{ file[nameKey] }}
        </a>
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-circle-check"></i>
        </label>
        <i class="el-icon-close text-notice" @click="handleRemove(index)"></i>
      </li>
    </ul>
    <template v-else>
      <ul class="el-upload-list el-upload-list--text" v-if="fileList.length">
        <li class="el-upload-list__item is-success" v-for="(file, index) in fileList" :key="index" @click="downloadFile(file.fileId)">
          <a class="el-upload-list__item-name" :title="file[nameKey]">
            <i class="el-icon-document"></i>
            {{ file[nameKey] }}
          </a>
          <label class="el-upload-list__item-status-label">
            <i class="el-icon-upload-success el-icon-download"></i>
          </label>
          <i class="el-icon-close text-success el-icon-circle-check"></i>
        </li>
      </ul>
      <span v-else>{{ emptyText }}</span>
    </template>
  </div>
</template>

<script>
export default {
  name: 'MFileList',
  props: {
    editable: {
      type: Boolean,
      default: false,
    },
    downloadAble: {
      // 非编辑状态下，兼容下载
      type: Boolean,
      default: false,
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    nameKey: {
      type: String,
      default: 'fileName',
    },
    emptyText: {
      type: String,
      default: '无',
    },
  },
  methods: {
    handleRemove(index) {
      this.$emit('remove', index)
    },
    downloadFile(fileId) {
      ;(this.editable || (!this.editable && this.downloadAble)) && this.$utils.downloadFile(fileId)
    },
  },
}
</script>

<style lang="scss" scoped>
.el-upload-list__item-name {
  margin-right: 30px;
}
</style>
